<script>
import { Loading } from 'element-ui'
import { marked } from 'marked'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

export default {
  name: 'BwDetail',
  data () {
    return {
      bowenid: '',
      res1: {},
      activeId: null, // 当前高亮的标题ID
      outline: [], // 保存大纲数据
      drawer: false
    }
  },
  created () {
    this.loadingInstance = Loading.service({ text: 'wodagejiaoxian', background: 'rgba(0, 0, 0, 0.8)' })
  },
  mounted () {
    this.$nextTick(async () => {
      this.bowenid = this.$route.params.bowenid
      this.res1 = await this.$axios.get(`/boke/content/${this.bowenid}/`)
      this.renderMarkdown()
      this.generateOutline()
    })
    setTimeout(() => { // 以服务的方式调用的 Loading 需要异步关闭
      this.loadingInstance.close()
    }, 500)
    // this.highlightCode()
  },
  methods: {
    renderMarkdown () {
      // console.log(this.res1)
      Vditor.preview(this.$refs.previewElement, this.res1.content, {
        speech: false, // 是否启用语音朗读
        anchor: true, // 是否显示锚点
        hljs: {
          style: 'monokai', // 代码高亮样式
          lineNumber: true // 显示行号
        }
      })
    },
    generateOutline () {
      this.outline = [] // 清空现有大纲
      const tokens = marked.lexer(this.res1.content) // 使用 marked 解析 Markdown 内容

      this.outline = tokens
        .filter(token => token.type === 'heading')
        .map(token => ({
          id: token.text.replace(/[.,!?;:"'\-()\u3000\uff0c\uff0e\uff1f\uff1b\uff1a\u201c\u201d\u300a\u300b\u3010\u3011\u300e\u300f]/g, '-'), // 生成ID
          text: token.text, // 标题内容
          level: token.depth // 标题层级
        }))
      // console.log('解析出的大纲:', this.outline)
    },
    scrollToHeading (id) {
      const heading = this.$refs.previewElement.querySelector(`#${id}`)
      if (heading) {
        heading.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    },
    totop () {
      window.scrollTo(
        {
          top: 0,
          behavior: 'smooth'
        }
      )
    }
  },
  beforeDestroy () {
    // window.removeEventListener('scroll', this.handleScroll) // 清理事件监听器
    // this.$refs.previewElement.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<template>
  <el-container class="yemian">
    <el-header style="padding: 0;">
      <img src="@/assets/18.jpg" alt="" class="beijing">
      <dao-hang1></dao-hang1>
    </el-header>
    <el-main style="padding: 0;height: 100%;overflow: visible">
      <div class="bj"></div>
      <el-row style="height: 100%;overflow: visible">
        <el-col class="mokuai1 ">
          <div style="width: 400px;" class="hidden-sm-and-down">
            <side-card style="margin: 10px"></side-card>
          </div>
          <div class="bj2">
            <img src="@/assets/12.jpg" alt="" class="beijing1">
            <h1 style="position: absolute;color: white;top: 50%;left: 50%;transform: translate(-50%,-50%)">{{
                res1.title
              }}</h1>
          </div>
        </el-col>
        <el-col class="mokuai2" style="overflow: visible;">
          <div class="hidden-sm-and-down side ">
            <div class="outline-container">
              <h3 style="text-align: center">大 纲</h3>
              <ul>
                <li v-for="(item, index) in outline" :key="index">
                  <a :href="'#' + item.id"
                     :style="{ paddingLeft: (item.level - 1) * 20 + 'px' }"
                     @click.prevent="scrollToHeading(item.text)"
                  >{{ item.text }}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="el-icon-s-fold hidden-md-and-up dagang" @click="drawer = true"></div>
          <el-drawer
            size="300px"
            direction="ltr"
            :visible.sync="drawer"
            :with-header="false"
          class="drawer">
            <div class="outline-container">
              <h3 style="text-align: center">大 纲</h3>
              <ul>
                <li v-for="(item, index) in outline" :key="index">
                  <a :href="'#' + item.id"
                     :style="{ paddingLeft: (item.level - 1) * 20 + 'px' }"
                     @click.prevent="scrollToHeading(item.text)"
                  >{{ item.text }}</a>
                </li>
              </ul>
            </div>
          </el-drawer>
          <div class="bj3">
            <p ref="previewElement" class="content"></p>
          </div>
        </el-col>
      </el-row>
      <a href="#" class="totop" @click.prevent="totop"><i class="el-icon-top"></i></a>
    </el-main>
    <el-footer style="padding: 0;height: 100%">
      <ye-jiao></ye-jiao>
    </el-footer>
  </el-container>
</template>

<style scoped lang="scss">
$imgbgd: rgba(0, 0, 0, 1);
$nengjiandu: 0.4;
$bgd: rgba(0, 0, 0, 0.5);
$textcol: white;
$border: 2px solid #003153;
.yemian {
  min-height: 100vh;
  user-select: none;
  overflow: visible;
  background: $imgbgd;
}

.bj {
  height: 50px;
  transition: all .5s;
  @media (max-width: 992px) {
    height: 0;
  }
}

.totop {
  width: 50px;
  height: 50px;
  color: $textcol;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  background: $bgd;
  position: fixed;
  z-index: 2;
  right: 20px;
  bottom: 100px;
  border-radius: 15px;

  &:hover {
    background: $imgbgd;
  }
}

.mokuai1 {
  padding: 10px;
  display: flex;
  justify-content: center;

  .bj2 {
    transition: all .5s;
    position: relative;
    margin: 10px;
    overflow: hidden;
    border-radius: 30px;
    background: $imgbgd;
    max-width: 1100px;
    width: 1100px;
    height: 500px;
    display: flex;
    border: $border;
    @media (max-width: 700px) {
      height: 250px;
    }
  }
}

.beijing {
  transform-origin: 50% 25%;
  width: 100vw;
  position: fixed;
  top: -50vh;
  opacity: $nengjiandu;
  @media (max-width: 1165px) {
    top: -50px;
    transform: scale(1.1);
  }
  @media (max-width: 992px) {
    top: 0;
    transform: scale(1.2);
  }
  @media (max-width: 830px) {
    transform: scale(1.4);
  }
  @media (max-width: 775px) {
    transform: scale(1.6);
  }
  @media (max-width: 625px) {
    transform: scale(1.8);
    top: 50px
  }
  @media (max-width: 500px) {
    transform: scale(2.0);
  }
  @media (max-width: 350px) {
    transform: scale(2.2);
  }
}

.beijing1 {
  width: 100%;
  transform-origin: 50% 25%;
  opacity: $nengjiandu;
  @media (max-width: 1650px) {
    transform: scale(1.4);
  };
  @media (max-width: 1260px) {
    transform: scale(1.8);
  };
  @media (max-width: 1085px) {
    transform: scale(2.2);
  };
  @media (max-width: 945px) {
    transform: scale(3.5);
  };
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #003153;
}

.mokuai2 {
  padding: 10px;
  display: flex;
  justify-content: center;
  @media (max-width: 992px) {
    display: block;
  }

  .dagang {
    cursor: pointer;
    height: 50px;
    width: 50px;
    background: $bgd;
    color: $textcol;
    position: fixed;
    z-index: 2;
    bottom: 100px;
    left: 20px;
    font-size: 40px;
    border-radius: 15px;
    line-height: 50px;
    text-align: center;

    &:hover {
      background: $imgbgd;
    }
  }
  .drawer{
    background: $bgd;
    ::v-deep .el-drawer{
      background: $bgd;
    }
    ul {
      list-style: none;

      a {
        text-decoration: none;
        color: rgba(256, 256, 256, 0.6);
        transition: all 0.2s;

        &:hover {
          color: #003153;
        }
      }
    }
  }
  .side {
    background: transparent;
    margin: 10px;
    width: 380px;

    .outline-container {
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-direction: column;
      color: $textcol;
      background: $bgd;
      border: $border;
      overflow-y: auto;
      position: sticky;
      top: 60px;
      border-radius: 30px;
    }

    ul {
      list-style: none;

      a {
        text-decoration: none;
        color: rgba(256, 256, 256, 0.6);
        transition: all 0.2s;

        &:hover {
          color: #003153;
        }
      }
    }
  }

  .bj3 {
    transition: all .5s;
    margin: 10px;
    border-radius: 30px;
    background: $bgd;
    display: flex;
    border: $border;

    .content {
      transition: all .5s;
      max-width: 1040px;
      overflow: auto;
      margin: 20px;
      justify-content: center;
      padding: 10px;
      color: $textcol;
      @media (max-width: 700px) {
        padding: 0;
        font-size: 13px;
      }

      ::selection {
        background: $textcol;
        color: $imgbgd;
      }

      ::v-deep svg {
        //background: white;
        //border-radius: 20px;
      }

      ::v-deep pre {
        overflow-x: auto;
        background: rgb(54, 59, 64);
        padding: 30px;
        border-radius: 10px;

        .hljs {
          background: rgb(54, 59, 64);
          color: $textcol;
          user-select: text;
        }
      }

      ::v-deep img {
        background: rgb(54, 59, 64);
        width: 100%;
        border-radius: 10px;
      }
    }
  }
}

</style>
